<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet} from "../../util/request.js";
import {showMessage} from "../../util/message.js";

// 路由路由参数对象
const route = useRoute()

// 创建路由对象
const router = useRouter()

// 创建用户详情对象
const userDetailInfo = ref({})

// 根据用户标识查询用户详情
const loadUserDetailInfo = () => {
  // 获取路由参数，使用useRoute()函数，其中参数名称为路由参数的名称
  let userId = route.params.userId
  // 查询指定用户详情
  doGet('/api/user/detail/info/'+userId, {})
      .then(resp => {
        if (resp.data.code === 200) {
          userDetailInfo.value = resp.data.data;
        } else {
          showMessage('查询用户详细信息失败，原因：' + resp.data.msg, 'error')
        }
      })
}

onMounted(() => {
  loadUserDetailInfo()
})
</script>

<template>

  <h1>用户详情信息页面</h1>
  <el-form
      style="max-width: 600px"
      :model="userDetailInfo"
      status-icon
      label-width="auto"
  >
    <el-form-item label="用户编号：">
      {{ userDetailInfo.id }}
    </el-form-item>
    <el-form-item label="登录账号：">
      {{ userDetailInfo.loginAct }}
    </el-form-item>
    <el-form-item label="用户姓名：">
      {{ userDetailInfo.name }}
    </el-form-item>
    <el-form-item label="用户手机：">
      {{ userDetailInfo.phone }}
    </el-form-item>
    <el-form-item label="用户邮箱：">
      {{ userDetailInfo.email }}
    </el-form-item>
    <el-form-item label="账户是否过期：">
      {{ userDetailInfo.accountNoExpired == 1 ? '否' : '是' }}
    </el-form-item>
    <el-form-item label="密码是否过期：">
      {{ userDetailInfo.credentialsNoExpired == 1 ? '否' : '是' }}
    </el-form-item>
    <el-form-item label="账户是否锁定：">
      {{ userDetailInfo.accountNoLocked == 1 ? '否' : '是' }}
    </el-form-item>
    <el-form-item label="账户是否启用：">
      {{ userDetailInfo.accountEnabled == 1 ? '否' : '是' }}
    </el-form-item>
    <el-form-item label="创建时间：">
      {{ userDetailInfo.createTime }}
    </el-form-item>
    <el-form-item label="创建人：">
      {{ userDetailInfo.createByName }}
    </el-form-item>
    <el-form-item label="编辑时间：">
      {{ userDetailInfo.editTime }}
    </el-form-item>
    <el-form-item label="编辑人：">
      {{ userDetailInfo.editByName }}
    </el-form-item>
    <el-form-item label="最近登录时间：">
      {{ userDetailInfo.lastLoginTime }}
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="router.back()">返回</el-button>
</template>

<style scoped>

</style>